<template>
  <div class="">
    <el-row>
      <el-col :span="11">
        <el-table
          v-loading="app.loading"
          class="search-table"
          :data="currentAccounts"
          :span-method="spanMethod"
          border
          fit
          highlight-current-row
          style="width: 100%;"
        >
          <el-table-column label="当日余额" align="right" width="180px">
            <template slot-scope="{row}">
              {{ app.toFix(currentAccount, 2) }}
            </template>
          </el-table-column>
          <el-table-column label="部门" align="center" width="80px">
            <template slot-scope="{row}">
              财务部
            </template>
          </el-table-column>
          <el-table-column label="账户" min-width="220px" prop="name" />
          <el-table-column label="金额" align="right" width="160px">
            <template slot-scope="{row}">
              {{ app.toFix(row.initial_money+row.collection_money-row.payment_money, 2) }}
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="1">
        <br />
      </el-col>
      <el-col :span="11">
        <el-table
          v-loading="app.loading"
          class="search-table"
          :data="yesterdayAccounts"
          :span-method="spanMethod"
          border
          fit
          highlight-current-row
          style="width: 100%;"
        >
          <el-table-column label="前日余额" align="right" width="180px">
            <template slot-scope="{row}">
              {{ app.toFix(yesterdayAccount, 2) }}
            </template>
          </el-table-column>
          <el-table-column label="部门" align="center" width="80px">
            <template slot-scope="{row}">
              财务部
            </template>
          </el-table-column>
          <el-table-column label="账户" min-width="220px" prop="name" />
          <el-table-column label="金额" align="right" width="160px">
            <template slot-scope="{row}">
              {{ app.toFix(row.initial_money+row.collection_money-row.payment_money, 2) }}
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="1">
        <br />
      </el-col>
      <el-col :span="24" class="h5">
        <br />
      </el-col>
      <el-col :span="8">
        <el-table
          v-loading="app.loading"
          class="search-table"
          :data="collections"
          border
          fit
          highlight-current-row
          style="width: 100%;"
        >
        <el-table-column align="center" label="本日收入">
          <el-table-column label="摘要" min-width="220px">
            <template slot-scope="{row}">
              <span v-if="row.ctm_name">{{ row.ctm_name }}<br/></span>
              <span v-if="row.remark">{{ row.remark }}<br/></span>
              <span v-if="row.fund_remark">{{ row.fund_remark }}<br/></span>
            </template>
          </el-table-column>
          <el-table-column label="金额" align="right" width="160px">
            <template slot-scope="{row}">
              {{ app.toFix(row.money, 2) }}
            </template>
          </el-table-column>
        </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="1">
        <br />
      </el-col>
      <el-col :span="8">
        <el-table
          v-loading="app.loading"
          class="search-table"
          :data="payments"
          border
          fit
          highlight-current-row
          style="width: 100%;"
        >
        <el-table-column align="center" label="本日支出">
          <el-table-column label="摘要" min-width="220px">
            <template slot-scope="{row}">
              <span v-if="row.sup_name">{{ row.sup_name }}<br/></span>
              <span v-if="row.company">{{ row.company }}<br/></span>
              <span v-if="row.reason">{{ row.reason }}<br/></span>
              <span v-if="row.fund_remark">{{ row.fund_remark }}<br/></span>
            </template>
          </el-table-column>
          <el-table-column label="金额" align="right" width="160px">
            <template slot-scope="{row}">
              {{ app.toFix(row.money, 2) }}
            </template>
          </el-table-column>
        </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="1">
        <br />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { fundDay } from '@/api/statistics/statistics'
import page from '@/utils/page'

export default {
  name: '',
  components: {},
  extends: page,
  props: {
    reqList: {
      default: fundDay,
      type: Function
    }
  },
  data() {
    return {
      collections: [],
      payments: [],
      currentAccount: 0,
      currentAccounts: [],
      yesterdayAccount: 0,
      yesterdayAccounts: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getListAfter(e) {
      this.collections = e.collections || []
      this.currentAccounts = e.currentAccounts || []
      this.currentAccounts.forEach(e => {
        this.currentAccount += e.initial_money+e.collection_money-e.payment_money
      })
      this.payments = e.payments || []
      this.yesterdayAccounts = e.yesterdayAccounts || []
      this.yesterdayAccounts.forEach(e => {
        this.yesterdayAccount += e.initial_money+e.collection_money-e.payment_money
      })
    },
    spanMethod({ row, column, rowIndex, columnIndex }){
      if (columnIndex === 0 || columnIndex === 1) {
          if (rowIndex === 0) {
            return {
              rowspan: this.currentAccounts.length,
              colspan: 1
            }
          } else {
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        }
    }
  }
}
</script>
<style scoped>
</style>
